<!-- 首页广告魔方 -->
<template>
  <view class="ad-cube" :style="cubeStyle">
    <view class="ad-container">
      <!-- 左侧图片区域 -->
      <view class="left-section">
        <!-- 上方图片 - 相车新模式租满就送车 -->
        <view class="left-top" @tap="onAdClick(leftAds.top)">
          <image 
            class="ad-image" 
            :src="sheep.$url.cdn(leftAds.top.imgUrl)" 
            mode="aspectFill"
          />
          <view class="ad-overlay">
            <view class="ad-title">{{ leftAds.top.title }}</view>
            <view class="ad-subtitle">{{ leftAds.top.subtitle }}</view>
            <view class="ad-action">{{ leftAds.top.action }}</view>
          </view>
        </view>
        
        <!-- 下方图片 - 租车指南 -->
        <view class="left-bottom" @tap="onAdClick(leftAds.bottom)">
          <image 
            class="ad-image" 
            :src="sheep.$url.cdn(leftAds.bottom.imgUrl)" 
            mode="aspectFill"
          />
          <view class="ad-overlay">
            <view class="ad-title">{{ leftAds.bottom.title }}</view>
            <view class="ad-subtitle">{{ leftAds.bottom.subtitle }}</view>
          </view>
          <view class="ad-decoration">
            <image class="decoration-img" :src="sheep.$url.cdn(leftAds.bottom.decorationImg)" />
          </view>
        </view>
      </view>
      
      <!-- 右侧区域 -->
      <view class="right-section">
        <!-- 上方轮播图 - 八大洲解放合资直营道 -->
        <view class="right-top">
          <swiper 
            class="banner-swiper"
            :autoplay="bannerConfig.autoplay"
            :interval="bannerConfig.interval"
            :duration="bannerConfig.duration"
            :circular="true"
            indicator-dots
            indicator-color="rgba(255, 255, 255, 0.5)"
            indicator-active-color="#ffffff"
          >
            <swiper-item v-for="(item, index) in rightAds.banners" :key="index" @tap="onAdClick(item)">
              <image 
                class="banner-image" 
                :src="sheep.$url.cdn(item.imgUrl)" 
                mode="aspectFill"
              />
              <view class="banner-overlay">
                <view class="banner-title">{{ item.title }}</view>
                <view class="banner-subtitle">{{ item.subtitle }}</view>
                <view class="banner-action">{{ item.action }}</view>
              </view>
            </swiper-item>
          </swiper>
        </view>
        
        <!-- 下方两个跳转图片 -->
        <view class="right-bottom">
          <!-- 零押租车 -->
          <view 
            class="bottom-item" 
            @tap="onAdClick(rightAds.bottomItems[0])"
          >
            <image 
              class="bottom-image" 
              :src="sheep.$url.cdn(rightAds.bottomItems[0].imgUrl)" 
              mode="aspectFill"
            />
            <view class="bottom-overlay">
              <view class="bottom-title">{{ rightAds.bottomItems[0].title }}</view>
              <view class="bottom-subtitle">{{ rightAds.bottomItems[0].subtitle }}</view>
            </view>
            <view class="bottom-badge">{{ rightAds.bottomItems[0].badge }}</view>
          </view>
          
          <!-- 会员中心 -->
          <view 
            class="bottom-item member-center" 
            @tap="onAdClick(rightAds.bottomItems[1])"
          >
            <view class="member-content">
              <view class="member-text-wrapper">
                <view class="member-title">{{ rightAds.bottomItems[1].title }}</view>
                <view class="member-subtitle">{{ rightAds.bottomItems[1].subtitle }}</view>
              </view>
              <view class="member-icon">⭐</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    leftAds: {
      type: Object,
      default: () => ({
        top: {
          imgUrl: 'https://picsum.photos/300/200/ff6b6b?text=租车新模式',
          title: '相车新模式',
          subtitle: '租满就送车',
          action: '立即查看',
          url: '/pages/service/rent-to-own'
        },
        bottom: {
          imgUrl: 'https://picsum.photos/300/200/4ecdc4?text=租车指南',
          title: '租车指南',
          subtitle: '新手专享优惠',
          decorationImg: 'https://picsum.photos/80/80?text=👨‍💼',
          url: '/pages/help/guide'
        }
      })
    },
    rightAds: {
      type: Object,
      default: () => ({
        banners: [
          {
            imgUrl: 'https://picsum.photos/400/200/45b7d1?text=八大洲品牌',
            title: '八大洲解放合资直营道',
            subtitle: '民营华东行业领导',
            action: '立即查看',
            url: '/pages/brand/bazou'
          }
        ],
        bottomItems: [
          {
            imgUrl: 'https://picsum.photos/200/100/eb4d4b?text=零押租车',
            title: '零押租车',
            subtitle: '信用免押金',
            badge: '0',
            url: '/pages/service/zero-deposit'
          },
          {
            title: '会员中心',
            subtitle: '开通享受高权益',
            url: '/pages/user/member'
          }
        ]
      })
    },
    bannerConfig: {
      type: Object,
      default: () => ({
        autoplay: true,
        interval: 3000,
        duration: 500
      })
    },
    bgColor: {
      type: String,
      default: '#f5f6fa'
    },
    padding: {
      type: String,
      default: '0rpx'
    },
    borderRadius: {
      type: String,
      default: '20rpx'
    },
    gap: {
      type: String,
      default: '12rpx'
    }
  });

  const emits = defineEmits(['adClick']);

  const cubeStyle = computed(() => ({
    backgroundColor: props.bgColor,
    padding: props.padding,
    borderRadius: props.borderRadius,
    '--gap': props.gap
  }));

  const onAdClick = (adItem) => {
    emits('adClick', adItem);
    if (adItem.url) {
      sheep.$router.go(adItem.url);
    }
  };
</script>

<style lang="scss" scoped>
.ad-cube {
  margin: 5rpx 20rpx 20rpx 20rpx;
  background: #f5f6fa;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;

  .ad-container {
    display: flex;
    gap: var(--gap);
    height: 400rpx;
    padding: 0;

    .left-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap);

      .left-top,
      .left-bottom {
        flex: 1;
        position: relative;
        border-radius: 16rpx;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
        }

        .ad-image {
          width: 100%;
          height: 100%;
        }

        .ad-overlay {
          position: absolute;
          top: 15rpx;
          left: 15rpx;
          right: 15rpx;

          .ad-title {
            color: #ffffff;
            font-size: 28rpx;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 8rpx;
          }

          .ad-subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 24rpx;
            line-height: 1.2;
            margin-bottom: 12rpx;
          }

          .ad-action {
            color: #ffffff;
            font-size: 22rpx;
            background: rgba(255, 255, 255, 0.2);
            padding: 6rpx 16rpx;
            border-radius: 20rpx;
            display: inline-block;
            backdrop-filter: blur(10rpx);
          }
        }
      }

      .left-bottom {
        .ad-decoration {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;

          .decoration-img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
        }
      }
    }

    .right-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap);

      .right-top {
        flex: 1;
        border-radius: 16rpx;
        overflow: hidden;

        .banner-swiper {
          width: 100%;
          height: 100%;

          .banner-image {
            width: 100%;
            height: 100%;
          }

          .banner-overlay {
            position: absolute;
            top: 20rpx;
            left: 20rpx;
            right: 20rpx;

            .banner-title {
              color: #ffffff;
              font-size: 26rpx;
              font-weight: 600;
              line-height: 1.2;
              margin-bottom: 8rpx;
            }

            .banner-subtitle {
              color: rgba(255, 255, 255, 0.9);
              font-size: 22rpx;
              line-height: 1.2;
              margin-bottom: 12rpx;
            }

            .banner-action {
              color: #ffffff;
              font-size: 20rpx;
              background: rgba(255, 255, 255, 0.2);
              padding: 4rpx 12rpx;
              border-radius: 16rpx;
              display: inline-block;
              backdrop-filter: blur(10rpx);
            }
          }
        }
      }

      .right-bottom {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--gap);

        .bottom-item {
          flex: 1;
          position: relative;
          border-radius: 16rpx;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.3s ease;
          width: 100%;

          &:active {
            transform: scale(0.98);
          }

          .bottom-image {
            width: 100%;
            height: 100%;
          }

          .bottom-overlay {
            position: absolute;
            top: 16rpx;
            left: 16rpx;
            right: 16rpx;

            .bottom-title {
              color: #ffffff;
              font-size: 24rpx;
              font-weight: 600;
              line-height: 1.2;
              margin-bottom: 4rpx;
            }

            .bottom-subtitle {
              color: rgba(255, 255, 255, 0.8);
              font-size: 20rpx;
              line-height: 1.2;
            }
          }

          .bottom-badge {
            position: absolute;
            top: 16rpx;
            right: 16rpx;
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
            color: #ffffff;
            font-size: 32rpx;
            font-weight: 700;
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
          }

          &.member-center {
            background: linear-gradient(135deg, #667eea, #764ba2);

            .member-content {
              padding: 20rpx;
              height: 60%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .member-text-wrapper {
                display: flex;
                flex-direction: column;

                .member-title {
                  color: #ffffff;
                  font-size: 24rpx;
                  font-weight: 600;
                  line-height: 1.2;
                }

                .member-subtitle {
                  color: rgba(255, 255, 255, 0.8);
                  font-size: 20rpx;
                  line-height: 1.2;
                }
              }

              .member-icon {
                font-size: 36rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                flex-shrink: 0;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 750rpx) {
  .ad-cube {
    margin: 4rpx 0 0 0;

    .ad-container {
      height: 350rpx;
      padding: 0;

      .left-section {
        .ad-overlay {
          top: 12rpx;
          left: 12rpx;
          right: 12rpx;

          .ad-title {
            font-size: 26rpx;
          }

          .ad-subtitle {
            font-size: 22rpx;
          }

          .ad-action {
            font-size: 20rpx;
          }
        }
      }

      .right-section {
        .right-top .banner-swiper .banner-overlay {
          top: 15rpx;
          left: 15rpx;
          right: 15rpx;

          .banner-title {
            font-size: 24rpx;
          }

          .banner-subtitle {
            font-size: 20rpx;
          }

          .banner-action {
            font-size: 18rpx;
          }
        }

        .right-bottom .bottom-item {
          .bottom-overlay {
            top: 12rpx;
            left: 12rpx;
            right: 12rpx;

            .bottom-title {
              font-size: 22rpx;
            }

            .bottom-subtitle {
              font-size: 18rpx;
            }
          }

          .bottom-badge {
            width: 50rpx;
            height: 50rpx;
            font-size: 28rpx;
          }

          &.member-center .member-content {
            padding: 15rpx;

            .member-text-wrapper {
              .member-title {
                font-size: 22rpx;
              }

              .member-subtitle {
                font-size: 18rpx;
              }
            }

            .member-icon {
              font-size: 32rpx;
              width: 36rpx;
              height: 36rpx;
            }
          }
        }
      }
    }
  }
}
</style>
